<template>
  <el-card class="container">
    <el-row type="flex" justify="space-between" class="mb10">
      <el-col>
        <el-button size="small" @click="handleBack">返回上一页</el-button>
        <span style="font-weight: bold; margin-left: 10px">{{ title }}</span>
      </el-col>
      <div>
        <el-button type="primary" size="mini" @click="handleSubmit"
          >提交</el-button
        >
      </div>
    </el-row>
    <div class="content">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        size="small"
      >
        <el-card
          header="客户信息"
          :borderd="false"
          shadow="never"
          :body-style="{ padding: 20 }"
          class="mb10"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="抵给对象"
                :rules="[
                  {
                    required: true,
                    message: '请选择抵给对象',
                    trigger: 'change',
                  },
                ]"
                prop="customerUserId"
              >
                <div style="display: flex; gap: 20px; align-items: center">
                  <span v-if="form.customerType">
                    <span style="color: #606266; font-weight: bold"
                      >客户类型：</span
                    >
                    <span v-if="form.customerType == '3'">供应商</span>
                    <span v-if="form.customerType == '4'">承运商</span>
                  </span>
                  <span v-if="form.customerUserId"
                    ><span style="color: #606266; font-weight: bold"
                      >客户ID：</span
                    >
                    {{ form.customerUserId }}</span
                  >
                  <el-button type="text" @click.native="handleSelectName">{{
                    form.customerUserId ? "请重新选择" : "请选择"
                  }}</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card header="抵顶物信息">
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-radio-group v-model="formType" @change="handelChangeType">
                  <el-radio-button :label="1">自定义抵出物品</el-radio-button>
                  <el-radio-button :label="2">选择已抵入物品</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="formType == '1'">
              <el-form-item label="抵顶物名称" prop="name">
                <el-input
                  style="width: 150px"
                  placeholder="请输入抵顶物名称"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-else>
              <el-form-item label="抵顶物名称" prop="offsetValue">
                <el-select
                  v-model="form.offsetValue"
                  filterable
                  @change="handelChangeOffset"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in allEnter"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单价" prop="price">
                <el-input-number
                  placeholder="请输入单价"
                  v-model="form.price"
                  :min="0"
                  style="width: 150px"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="数量" prop="num">
                <el-input-number
                  placeholder="请输入数量"
                  v-model="form.num"
                  style="width: 150px"
                  :min="1"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="抵出总金额">
                {{ form.price * form.num }}
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="抵出经办人" prop="handleUid">
                <el-select
                  v-model="form.handleUid"
                  filterable
                  multiple
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in allUser"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务类型" prop="bizType">
                <el-select v-model="form.bizType" style="width: 150px">
                  <el-option label="合同约定" :value="0">合同约定</el-option>
                  <el-option label="非合同约定" :value="1"
                    >非合同约定</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="抵顶协议" prop="agreement">
                <file-upload
                  :isShowTip="false"
                  v-model="form.agreement"
                  :fileType="['png', 'jpg', 'jpeg']"
                ></file-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card header="其他信息" class="mt10" v-if="form.id">
          <el-row>
            <el-col :span="12">
              <el-form-item label="抵顶物ID">{{ form.id }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抵出状态">{{
                form.statusDesc
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后编辑时间">{{ form.mtime }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后编辑人">{{
                form.modifyUsername
              }}</el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </div>
    <SelectCustomDialog
      :dialogVisible="dialogVisible"
      :multiple="false"
      @onClose="dialogVisible = false"
      @onSubmit="handleOnSubmit"
    ></SelectCustomDialog>
    <SelectContractDialog
      :dialogVisible="contraVisible"
      :multiple="false"
      @onClose="contraVisible = false"
      @onSubmit="handleContracSubmit"
    ></SelectContractDialog>
  </el-card>
</template>

<script>
import SelectCustomDialog from "./components/SelectCustomDialog";
import SelectContractDialog from "./components/SelectContractDialog";
import { listUser } from "@/api/system/user";
import {
  updatePutinto,
  getPutinto,
  addPutinto,
  listEnter,
  // addRepair,
  // updateRepair,
} from "@/api/service/arrive/outer.js";
export default {
  components: {
    SelectCustomDialog,
    SelectContractDialog,
  },
  data() {
    return {
      dialogVisible: false,
      contraVisible: false,
      allUser: [],
      allEnter: [],
      formType: "1",
      form: {
        bizType: null,
        obj: null,
        type: 1,
        name: null,
        price: 0,
        num: 1,
        handleUid: null,
        offsetValue: null,
        agreement: null,
        type: null,
        contractId: null,
        customerUserId: null,
      },
      rules: {
        obj: [
          {
            required: true,
            message: "抵给对象是必填项",
            trigger: "blur,change",
          },
        ],
        bizType: [
          {
            required: true,
            message: "请选择业务类型",
            trigger: "blur,change",
          },
        ],
        name: [
          {
            required: true,
            message: "抵顶物是必填项",
            trigger: "blur,change",
          },
        ],
        price: [
          {
            required: true,
            message: "单价是必填项",
            trigger: "blur,change",
          },
        ],
        num: [
          {
            required: true,
            message: "数量是必填项",
            trigger: "blur,change",
          },
        ],
        handleUid: [
          {
            required: true,
            message: "抵出经办人是必填项",
            trigger: "blur,change",
          },
        ],
        offsetValue: [
          {
            required: true,
            message: "请选择抵入物",
            trigger: "blur,change",
          },
        ],
        agreement: [
          {
            required: true,
            message: "抵顶协议是必填项",
            trigger: "blur,change",
          },
        ],
        type: [
          {
            required: true,
            message: "抵顶物类型是必填项",
            trigger: "blur,change",
          },
        ],
        contractId: [
          {
            required: true,
            message: "请选择关联合同",
            trigger: "blur,change",
          },
        ],
        customerUserId: [
          {
            required: true,
            message: "请选择抵给对象",
            trigger: "blur,change",
          },
        ],
      },
    };
  },
  created() {
    this.getAllUserList();
    this.getAllEnterList();
    this.userId = this.$route.query.id;
    if (this.userId) {
      this.getUserInfo(this.userId);
    }
  },
  computed: {
    title() {
      return !this.$route?.query?.id ? "新增抵出" : "修改抵出";
    },
  },
  methods: {
    handelChangeType(val) {
      this.form.offsetValue = null;
      this.form.offsetId = null;
      this.form.name = null;
    },
    handelChangeOffset(val) {
      console.log(val);
    },
    getUserInfo(userId) {
      if (userId) {
        getPutinto(userId).then((response) => {
          this.form = {
            ...this.form,
            ...response.data,
          };
          if (this.form.offsetId && this.form.name) {
            this.form.offsetValue = this.form.offsetId + "," + this.form.name;
            this.formType = "2";
          }
          this.form.handleUid = this.form.handleUidList;
        });
      }
    },
    getAllUserList() {
      listUser({ pageNum: 1, pageSize: 10000 }).then((res) => {
        this.allUser = res.rows.map((item) => ({
          ...item,
          label: item.nickName,
          value: item.userId,
        }));
      });
    },
    getAllEnterList() {
      listEnter().then((res) => {
        this.allEnter = res.data.map((item) => ({
          ...item,
          label: item.name,
          value: item.id + "," + item.name,
        }));
      });
    },
    handleBack() {
      this.$router.push({
        name: "Outer",
      });
    },
    // 选择客户-弹框展示
    handleSelectName() {
      this.dialogVisible = true;
    },
    // 选择客户
    handleOnSubmit(row) {
      this.form.customerUserId = row.userInfoId;
      this.form.customerType = row.userProperty;
    },
    // 选择合同-弹框展示
    handleSelectContract() {
      this.contraVisible = true;
    },
    // 选择合同
    handleContracSubmit(row) {
      this.form.contractId = row.id;
      this.form.projectNo = row.projectNo;
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          if (this.form.offsetValue && this.form.offsetValue.indexOf(",") > 0) {
            let temp = this.form.offsetValue.split(",");
            this.form.offsetId = temp[0];
            this.form.name = temp[1];
          }
          if (this.userId) {
            updatePutinto({
              ...this.form,
            }).then((res) => {
              this.$message.success("更新成功");
              this.$router.push({ name: "Outer" });
            });
          } else {
            addPutinto({
              ...this.form,
            }).then((res) => {
              this.$message.success("新增成功");
              this.$router.push({ name: "Outer" });
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  ::v-deep.el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
